<template>
    <div class="foot">
        <div class="footer-cnt border-top">
            <ul class="items">
                <li
                  v-for="(item, index) in arr"
                  :key="index"
                  class="item"
                  @click="reload(item.path)"
                  :class="{'cur': curFlag == item.path}"
                >
                    <span :class="['icon-'+index,item.cls]" class="icon iconfont"></span>
                    <span class="txt">{{item.txt}}</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name: "FooterPage",
    data ( ) {
        return {
            arr: [
                {
                    path: '/index',
                    txt: '首页',
                    cls: 'icon-shouye'
                },
                {
                    path: '/center',
                    txt: '我的',
                    cls: 'icon-wode'
                }
            ]
        }
    },
    computed: {
        curFlag ( ) {
            return this.$route.path
        }
    },
    methods: {
        reload ( path ) {
            if ( this.$route.path == path ) {
                window.location.reload()
            } else {
                this.$router.push(path)
            }            
        }
    }   
}
</script>

<style lang="stylus" scoped>
.foot 
    width 100%
    height 49px
    overflow hidden
    .footer-cnt
        width 100%
        height 49px
        font-size 14px
        color #333
        background-color #fff
        position fixed 
        left 0
        bottom 0
        right 0
        z-index 50
        overflow hidden
        .items 
            width 100%
            height 100%
            padding-top 5px
            box-sizing border-box 
            display flex
            overflow hidden
            .item
                flex 1
                height 100%
                text-align center 
                .icon 
                    display block 
                    width 100%
                    height 26px 
                    line-height 26px
                    font-size 24px
                    float left
                    background-repeat no-repeat
                    background-size auto 100%
                    background-position center
                .txt 
                    display block
                    width 100%
                    height 18px
                    line-height 18px
                    float left 
                    font-size 11px
            .router-link-active,.cur
                color #F8A120               
</style>
